<!--
 * @Description: 自定义切换卡
 * @Author: Zhanghan
 * @Date: 2024-11-20 11:36:18
 * @LastEditTime: 2024-12-05 11:33:20
 * @LastEditors: Zhanghan
-->
<template>
  <ElTabs v-model="active" class="demo-tabs" @tab-click="handleClick">
    <ElTabPane
      v-for="item in tabsList"
      :key="item.label"
      :label="item.label"
      :name="item.value"
      :disabled="item.disabled"
    />
  </ElTabs>
</template>
<script setup lang="ts">
import { ElTabs, ElTabPane } from "element-plus";
import type { TabsPaneContext } from "element-plus";
import type { TabsList } from "./type";

defineOptions({ name: "ProTabs" });

const active = defineModel<number>("active"); //绑定默认选中

const props = defineProps<{ tabsList: TabsList[] }>();

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
</script>
